<template>
  <PageWrapper title="权限列表" contentFullHeight>
    <div class="py-4">
      <BasicTable @register="register" :dataSource="state.authList" :loading="state.listLoading">
        <template #level="{ record }">
          <a-tag v-if="record.level == 0" color="rgba(0, 132, 244)">一级</a-tag>
          <a-tag v-if="record.level == 1" color="rgba(0, 150, 136)">二级</a-tag>
          <a-tag v-if="record.level == 2" color="rgba(255, 152, 0)">三级</a-tag>
        </template>
      </BasicTable>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table';
  import { onMounted, reactive } from 'vue';
  import { useShopRoleStore } from '/@/store/modules/shopRoleStore';

  const state = reactive({
    columns: [
      {
        title: '权限名称',
        dataIndex: 'authName',
      },
      {
        title: '路径',
        dataIndex: 'path',
      },
      {
        title: '权限等级',
        dataIndex: 'level',
        slots: { customRender: 'level' },
      },
    ],
    authList: [],
    listLoading: false,
  });

  const [register] = useTable({
    title: '权限列表',
    titleHelpMessage: 'auth',
    rowKey: (record: any) => {
      return record.id;
    },
    columns: state.columns,
    striped: true,
    bordered: true,
    showTableSetting: false,
    pagination: false,
  });

  const shopRoleStore = useShopRoleStore();

  onMounted(() => {
    getAuthList();
  });

  const getAuthList = async () => {
    state.listLoading = true;
    try {
      const data = await shopRoleStore.authList({ type: 'list' });
      state.authList = data;
    } catch (error) {
      console.error(error);
    }
    state.listLoading = false;
  };
</script>

<style scoped></style>
